<template>
    <v-form ref="fieldFormRef">
        <mrc_ess_Select v-model="formData.question" :label="$t('label_question')" placeholder="text"
            :mode="props.formType">
        </mrc_ess_Select>
        <mrc_ess_Input v-model="formData.name" :label="$t('label_name')" placeholder="text"
            :mode="props.formType">
        </mrc_ess_Input>
        <mrc_ess_Input v-model="formData.description" :label="$t('label_description')" placeholder="text"
            :mode="props.formType">
        </mrc_ess_Input>
        <mrc_ess_Input v-model="formData.code" :label="$t('label_code')" placeholder="text"
            :mode="props.formType">
        </mrc_ess_Input>
        <mrc_ess_InputNumber v-model="formData.sequence" :label="$t('label_sequence')" placeholder="text"
            :mode="props.formType">
        </mrc_ess_InputNumber>
        <mrc_ess_Select v-model="formData.questionType" :label="$t('label_question_type')" placeholder="text"
            :mode="props.formType">
        </mrc_ess_Select>
        <mrc_ess_InputNumber v-model="formData.weight" :label="$t('label_weight')" placeholder="text"
            :mode="props.formType">
        </mrc_ess_InputNumber>
        <mrc_ess_Select v-model="formData.ratingTemplate" :label="$t('title_rating_template')" placeholder="text"
            :mode="props.formType">
        </mrc_ess_Select>
        <mrc_ess_Select v-model="formData.ratingTemplateDescriptionMode" :label="$t('label_rating_template_description_mode')" placeholder="text"
            :mode="props.formType">
        </mrc_ess_Select>
        <mrc_ess_InputNumber v-model="formData.version" :label="$t('label_version')" placeholder="text"
            :mode="props.formType">
        </mrc_ess_InputNumber>
        <mrc_ess_Select v-model="formData.propertyGroup" :label="$t('label_property_group')" placeholder="text"
            :mode="props.formType">
        </mrc_ess_Select>
        <mrc_ess_Input v-model="formData.remarks" :label="$t('label_remarks')" placeholder="text"
            :mode="props.formType">
        </mrc_ess_Input>
    </v-form>
</template>

<script lang="ts" setup>
import { ref, watch, toRaw } from 'vue';

const props = defineProps({
    formType: {
        type: String,
        default: 'add'
    }
})

// 表单
const fieldFormRef = ref<any>(null);

// 表单类型发生变化
watch(() => props.formType, (val) => {
    if (val == "edit") {
        // 记录源数据
        rawData.value = JSON.parse(JSON.stringify(toRaw(formData.value)));
    } else if (val == "view") {
        // 恢复源数据
        formData.value = JSON.parse(JSON.stringify(toRaw(rawData.value)));
    }
})

const rules = {
    required: value => !!value || 'Field is required'
}

// 源数据
const rawData = ref<any>({});
// 表单数据
const formData = ref({
    question: '',
    name: "",
    description: "",
    code: "",
    sequence: "",
    questionType: "",
    weight: "",
    ratingTemplate: "",
    ratingTemplateDescriptionMode: "",
    version: "",
    propertyGroup: '',
    remarks: ""
})

/**
 * 设置表单数据
 */
function setFormData(data: any = null) {
    formData.value.question = data?.question || "";
    formData.value.name = data?.name || "";
    formData.value.description = data?.description || "";
    formData.value.code = data?.code || "";
    formData.value.sequence = data?.sequence || "";
    formData.value.questionType = data?.questionType || "";
    formData.value.weight = data?.weight || "";
    formData.value.ratingTemplate = data?.ratingTemplate || "";
    formData.value.ratingTemplateDescriptionMode = data?.ratingTemplateDescriptionMode || "";
    formData.value.version = data?.version || "";
    formData.value.propertyGroup = data?.propertyGroup || "";
    formData.value.remarks = data?.remarks || "";
}

/**
 * 验证表单
 */
function validate() {
    return new Promise(async (resolve, reject) => {
        const { valid, errors } = await fieldFormRef.value.validate();
        resolve({ valid, errors });
    })
}

defineExpose({
    formData,
    setFormData,
    resetFormData: () => {
        setFormData(null)
    },
    validate
})

</script>

<style scoped></style>